<!DOCTYPE HTML>

<html ng-app lang="en">

{{>/head}}

<div class="container" >
		<!-- ========================================================================================================= row1 (title) -->
		<div class="row">
            <center><h1 class="logoBigText"><span class="vcu">new</span>Track</h1></center>
        </div>
        <!-- ========================================================================================================= /row1 (title) -->

		<!-- ========================================================================================================= /row2 (New Track Form) -->
		<div class="row">
			<div class="col-md-3"></div>

			<form ng-submit='creatNewTrackform()'  ng-controller="trackController" name="newTrackForm" class="col-md-6" novalidate>

                <!-- ========================================================================================================= Track ID Input -->
                <p class="motto">ID of New Track:</p>

                <div class="form-group">
                    <input type="text" placeholder="Track ID" name="TrackId" ng-model="track.trackId" class="form-control" required>
                </div>
                <!-- ========================================================================================================= /Track ID Input -->

                <!-- ========================================================================================================= Track Name Input -->
                <p class="motto">Name of New Track:</p>

                <div class="form-group">
                    <input type="text" placeholder="Track Name" name="TrackName" ng-model="track.trackName" class="form-control" required>

                </div>
                <!-- ========================================================================================================= /Track Name Input -->

                <!-- ========================================================================================================= platform Dropdown -->
                <div class="form-group">
                    <p class="motto">Platform:</p>
                    <select class="empty btn btn-mini form-control" ng-model="track.platformId" required name="Platform">
                        <option value="" selected disabled>Select Platform</option>
                        {{#platforms}}
                        <option value="{{platformId}}">{{platformName}}</option>
                        {{/platforms}}
                    </select>
                </div>
                <!-- ========================================================================================================= /platform Dropdown -->

                <!-- ========================================================================================================= Track Description Input -->
                <div class="form-group">
                    <p class="motto">Track Description:</p>
                    <textarea class="form-control"
                        type="text"
                        name="trackDesc"
                        placeholder="Track Description"
                        ng-model="track.description"
                        rows="5"></textarea>
                </div>
                <!-- ========================================================================================================= /Track Description Input -->

                <!-- ========================================================================================================= ValidationBlock -->
                <div class="alert alert-warning"
                        class="help-block"
                        ng-show="newTrackForm.$invalid">
                    <li ng-show="newTrackForm.TrackId.$error.required">Please enter a ID for the new Track.</li>
                    <li ng-show="newTrackForm.TrackName.$error.required">Please enter a name for the new Track.</li>
                    <li ng-show="newTrackForm.Platform.$error.required">Please select a Platform.</li>
                </div>
                <!-- ========================================================================================================= /ValidationBlock -->

                <!-- ========================================================================================================= admin Panel -->
                <div class="alert alert-warning">

                    {{=[[ ]]=}}

                         <p>Admin Panel:</p>
                         <pre>{{track | json}}</pre>

                     [[={{ }}=]]
                 </div>
                <!-- ========================================================================================================= /admin Panel -->

                <!-- ========================================================================================================= Reset and Submit Buttons -->
                <center>

                    <button ng-click="reset()" type="reset" class="btn btn-primary">Reset</button>
                    <button
                       ng-click="update(track)"
                        type="submit"
                        ng-disabled="newTrackForm.$invalid"
                        class="btn btn-success" >Submit Track
                    </button>

                     <!--
                     {{=<% %>=}}
                     <div class="row">
                        <p>Track created on: {{'1288323623006' | date:'MM/dd/yyyy, h:mma'}}</p>
                     </div>
                     <%={{ }}=%> -->

                </center>
                <!-- ========================================================================================================= /Reset and Submit Buttons -->

			</form><!--/newTrackForm-->

			<div class="col-md-3"></div>

		</div><!--/row-->
		<!-- ========================================================================================================= /row2 (New Track Form) -->
	</div> <!--/container-->



{{>/foot}}

	<script type="text/javascript">

	function trackController($scope, $http) {
		$scope.master= {};
		$scope.track= {};
		$scope.output= {};
		$scope.submitURL="/registertrack";
		$scope.update = function(track) {
			$scope.master= angular.copy(track);
			$http.post($scope.submitURL, $scope.track).success(function(data){
				$scope.output.log= data;
				$scope.track={};
				window.location.href=window.location.href;
				});
		}
		$scope.reset = function() {
			$scope.track = angular.copy($scope.master);
			$scope.form.$setPristine();
		};
	}
	</script>

</html>